<template>
  <div id="index-recommend-swiper">
    <div class="breadcrumb-add-btn">
      <!-- 面包屑 -->
      <div class="breadcrumb-main">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: '/home/recommend' }"
            >首页推荐</el-breadcrumb-item
          >
          <el-breadcrumb-item>轮播图</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <!-- 添加按钮 -->
      <div id="add-btn" @click="addSwiperfunc">
        <el-button type="primary">添 加</el-button>
      </div>
    </div>

    <!-- 轮播图数据列表 -->
    <div id="swiperList">
      <el-table
        :data="tableData"
        style="width: 100%"
        :header-cell-style="headerCellStyle"
        :cell-style="cellStyle"
      >
        <el-table-column label="日期" width="200">
          <template slot-scope="scope">
            <i class="el-icon-time"></i>
            <span style="margin-left: 10px">{{
              scope.row.updateTime.substring(0, 10)
            }}</span>
          </template>
        </el-table-column>
        <el-table-column label="名称" width="200">
          <template slot-scope="scope">
            <el-popover trigger="hover" placement="top">
              <p>名称: {{ scope.row.name }}</p>
              <p>
                描述:
                {{
                  scope.row.description === null ? "无" : scope.row.description
                }}
              </p>
              <p>是否展示在APP: {{ scope.row.isShowApp ? "是" : "否" }}</p>
              <div slot="reference" class="name-wrapper">
                <el-tag size="medium">{{ scope.row.name }}</el-tag>
              </div>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="编码" width="200">
          <template slot-scope="scope">
            <span>{{ scope.row.swiperCode }}</span>
          </template>
        </el-table-column>
        <el-table-column label="图片" width="300">
          <template slot-scope="scope">
            <el-image
              style="width: 100px; height: 100px"
              :src="scope.row.url"
              fit="cover"
            ></el-image>
          </template>
        </el-table-column>
        <el-table-column label="类型" width="200">
          <template slot-scope="scope">
            <span>{{ scope.row.type }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
              >编辑</el-button
            >
            <el-popconfirm
              confirm-button-text="确定"
              cancel-button-text="取消"
              icon="el-icon-info"
              icon-color="red"
              title="确定删除这个轮播图吗？"
              @confirm="handleDelete(scope.row)"
            >
              <el-button type="danger" size="mini" slot="reference" plain
                >删除</el-button
              >
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { getSwiperImageLisT,deleteSwiperByAid } from "../../request/home.js";
export default {
  data() {
    return {
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          type: "资讯",
          address: "上海市普陀区金沙江路 1518 弄",
          desc: "cw反而外模饿过去阿如cw反而外模饿过去阿如cw反而外模饿过去阿如",
          imgUrl:
            "http://gips3.baidu.com/it/u=1022347589,1106887837&fm=3028&app=3028&f=JPEG&fmt=auto?w=960&h=1280",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          type: "资讯",

          address: "上海市普陀区金沙江路 1517 弄",
          desc: "cw反而外模饿过去阿如",
          imgUrl:
            "http://gips3.baidu.com/it/u=1022347589,1106887837&fm=3028&app=3028&f=JPEG&fmt=auto?w=960&h=1280",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          type: "资讯",
          address: "上海市普陀区金沙江路 1519 弄",
          desc: "cw反而外模饿过去阿如",
          imgUrl:
            "http://gips3.baidu.com/it/u=1022347589,1106887837&fm=3028&app=3028&f=JPEG&fmt=auto?w=960&h=1280",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          type: "资讯",
          address: "上海市普陀区金沙江路 1516 弄",
          desc: "cw反而外模饿过去阿如",
          imgUrl:
            "http://gips3.baidu.com/it/u=3886271102,3123389489&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=960",
        },
      ],
    };
  },

  created() {
    // 获取轮播图列表
    this.getSwiperImageLisTfunc();
  },

  methods: {
    // 获取轮播图列表
    getSwiperImageLisTfunc() {
      this.tableData = [];
      getSwiperImageLisT()
        .then((res) => {
          // console.log(res);
          this.tableData = res.data;
        })
        .catch((err) => {
          console.log(err);
          this.$message.error("获取轮播信息失败！");
        });
    },

    // 添加轮播弹框表单
    addSwiperfunc() {
      this.$router.push({
        path: "/home/recommend/swiper/addoredit",
        query: {
          name: "添加",
        },
      });
    },

    headerCellStyle() {
      return {
        "text-align": "center",
      };
    },
    cellStyle() {
      return {
        "text-align": "center",
      };
    },
    handleEdit(index, row) {
      // console.log(index, row);
      this.$router.push({
        path: "/home/recommend/swiper/addoredit",
        query: {
          name: "编辑",
          row: row,
        },
      });
    },
    handleDelete(row) {
      // console.log(row);
      // console.log(row.aid)
      const param = {
        swiperAid: row.aid
      }
      deleteSwiperByAid(param).then(res=>{
        if(res.code === 10000){
          this.$message.success('删除成功！')
        }else {
          this.$message.error('删除失败！请稍后再试...')
        }
      }).catch(err=>{
        console.log(err)
        this.$message.error('删除失败！请稍后再试...')
      })
    },
  },
};
</script>

<style scoped>
#swiperList {
  margin-top: 20px;
}
.breadcrumb-add-btn {
  display: flex;
  justify-content: space-between;
}
</style>
